<template>
  <div class="page-header-index-wide">
    <!-- <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <chart-card :loading="loading" title="当天业绩" :total="'￥'+ todayAggregationResult.totalTakeMoney | NumberFormat">
         </chart-card>
       </a-col>
       <a-col v-if="userInfo.rolestr === 'admin'" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <chart-card :loading="loading" title="当天利润" :total="'￥'+ todayAggregationResult.profit | NumberFormat">
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <chart-card :loading="loading" title="本月业绩" :total="'￥'+ monthAggregationResult.totalTakeMoney | NumberFormat">
         </chart-card>
       </a-col>
       <a-col v-if="userInfo.rolestr === 'admin'" :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
         <chart-card :loading="loading" title="本月利润" :total="'￥'+ monthAggregationResult.profit | NumberFormat">
         </chart-card>
       </a-col>
     </a-row>
     <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
       <a-row :style="{marginTop:'10px',marginLeft:'10px'}">
         <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
           年份:
           <a-select default-value="2021" style="width: 120px" @change="yearSelectChange">
             <a-select-option v-for="y in yearList" :value="y">{{y}}</a-select-option>
           </a-select>
         </a-col>
       </a-row>
       <a-row>
         <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
           <bar title="历史业绩" :dataSource="monthTakeMoneyAggregationList"/>
         </a-col>
       </a-row>
     </a-card>-->
    <aggregation-chart-card Cardtype="sy" :loading="loading" :roleStr = "userInfo.rolestr"></aggregation-chart-card>

    <a-row :gutter="24" v-if="userInfo.rolestr === 'admin'">
      <a-col :style="{ marginBottom: '24px' }">
        <visitor-order-form-list :userInfo="userInfo"></visitor-order-form-list>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import Bar from '@/components/chart/Bar'
import Trend from '@/components/Trend'
import {getLoginfo, orderFormAggregationsTotal, orderFormAggregationsTotalByMonth, queryYearList} from '@/api/api'
import {Dict} from '@/api/Dict'
import VisitorOrderFormList from '@/views/orderForm/VisitorOrderFormList.vue'
import AggregationChartCard from '@/views/orderForm/AggregationChartCard.vue'

const barData = [];
for (let i = 1; i <= 12; i++) {
  barData.push({
    x: `${i}月`,
    y: 0
  })
}

export default {
  name: "Analysis",
  mixins: [Dict],
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Bar,
    Trend,
    VisitorOrderFormList,
    AggregationChartCard
  },
  data() {
    return {
      loading: true,
      center: null,
      logInfo: {},
      todayAggregationResult: {
        totalTakeMoney: 0,
        profit: 0,
        totalCost: 0,
        commission: 0
      },
      monthAggregationResult: {
        totalTakeMoney: 0,
        profit: 0,
        totalCost: 0,
        commission: 0
      },
      monthTakeMoneyAggregationList: [],
      year: new Date().getFullYear(),
      yearList: [],
      userInfo: {}
    }
  },
  created() {
    this.userInfo = this.$store.getters.userInfo;
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000);
    this.initLogInfo();
    // this.queryTotal();
    // this.queryTotalByMonth();
    // this.getYearList();
  },
  methods: {
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          this.logInfo = res.result;
        }
      })
    },
    queryTotal() {
      let data = {
        type: 0
      };
      orderFormAggregationsTotal(data).then(res => {
        if (res.success) {
          this.todayAggregationResult = res.result;
        }
      });
      let monthData = {
        type: 1
      };
      orderFormAggregationsTotal(monthData).then(res => {
        if (res.success) {
          this.monthAggregationResult = res.result;
        }
      });
    },
    queryTotalByMonth() {
      let data = {
        year: this.year
      };
      orderFormAggregationsTotalByMonth(data).then(res => {
        if (res.success) {
          let {rolestr} = this.userInfo;
          let result = res.result;
          for (let r of result) {
            let y = 0;
            this.monthTakeMoneyAggregationList.push({
              x: `${r.mon.substring(6)}月`,
              y: r[this.roleStrMapDic[rolestr]]
            });
          }
          if (this.monthTakeMoneyAggregationList.length === 0) {
            this.monthTakeMoneyAggregationList = barData;
          }
        }
      });
    },
    yearSelectChange(val) {
      this.year = val;
      this.monthTakeMoneyAggregationList = [];
      this.queryTotalByMonth();
    },
    getYearList() {
      queryYearList().then(res => {
        if (res.success) {
          this.yearList = res.result;
        }
      });
    }


  }
}
</script>

<style lang="scss" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>